<!--
 * @Description: file content
 * @Author: xuqiuting
 * @Date: 2021-07-02 23:14:28
 * @LastEditors: luojie
 * @LastEditTime: 2021-07-06 20:48:28
-->
<template>
  <view class="check-in-dialog">
    <!-- <view class="block">
      <label class="title">房间选择</label>
      <text class="text">以下房间均已完成消杀</text>
    </view> -->

    <view class="header">
      <view class="tool">
      <!-- <picker @change="bindPickerChange" :value="index" :range="array">
        <view class="uni-input">{{ array[index] }}</view>
      </picker> -->
      <picker
        @change="bindPickerChange"
        :value="index"
        :range="array"
        range-key="roomFloor"
        class="normal-control-con-picker"
      >
        <view style="display: inline-block" class="uni-input">{{
          selectedFloor?selectedFloor+'F':"选择楼层"
        }}</view>
        <view class="img" style="display: inline-block; float: right">
          <image
            class="nav-list-item-arr-show"
            src="https://szgd-dev.tgovcloud.com/public/images/checkin/arrow-down.png"
            mode="widthFix"
          ></image>
        </view>
      </picker>
      <view class="search-room-num">
        <image src="https://szgd-dev.tgovcloud.com/public/images/checkin/icon-search.png"></image>
        <input
          class="uni-input"
          style="padding-left: 64rpx"
          placeholder="可输入房间号搜索"
          v-model="searchValue"
          @blur="searchRoomNum"
        />
      </view>
    </view>
    <view class="tips">以下房间均已完成消杀</view>
    </view>
    
    <radio-group class="check-content">
      <ul>
        <li v-for="(item, key) in roomList" :key="item.roomFloor">
          <h2 class="liHeader" v-if="item.roomInfos.length > 0">{{ item.roomFloor }}F</h2>
          <div class="liContentwraper">
            <template v-for="(list, key) in item.roomInfos">
              <div
                :class="
                  roomCheck == list.roomNum
                    ? 'roomContainer roomContainerCheck'
                    : 'roomContainer'
                "
                :key="key"
                @click="()=>{radioChange(list)}"
              >
                <div class="top">
                   {{ list.roomNum }}房
                </div>
               
                  <label class="status-wrapper"
                    >
                    <!-- <radio
                      name="hotelRoom"
                      :value="list.roomNum"
                      :color="roomCheck == list.roomNum ? '#2C9AF1' : ''"
                      :checked="roomCheck == list.roomNum"
                  />
                  -->
                        <p class="status-yixiaodu green-status" v-if="list.roomState =='01' ">未入住</p>
                        <p class="status-ruzhu" v-else-if="list.roomState == 11">已锁定</p>
                        <p class="status-ruzhu red-status" v-else-if="list.roomState == 21">已入住</p>
                        <p class="status-ruzhu red-status" v-else-if="list.roomState == 31">待消毒</p>
                  </label>
              
              </div>
            </template>
          </div>
        </li>
      </ul>
    </radio-group>
    <view class="footer">
      <button :disabled="!roomId" class="dialogOk" @click="comfirm">确定</button>
    </view>
  </view>
</template>

<script>
import { getData } from "@/api";
export default {
  props: ["value", "houseId"],
  data() {
    return {

      roomCheck: this.value,
      roomId: this.houseId,
      roomNum: [],
      searchValue: "",
      index: "0",
      roomList:[],
      array: ["楼层选择", "1楼", "2楼", "3楼", "4楼"],
      selectedFloor:'', // 选中的楼层
      status: [
          {
              "label": "已消毒",
              "value": "01"
          },
          {
              "label": "已锁定",
              "value": "11"
          },
          {
              "label": "已入住",
              "value": "21"
          },
          {
              "label": "待消杀",
              "value": "31"
          }
      ]
    };
  },

  methods: {
    onDialogClose() {
      this.$emit("onClose");
    },
    comfirm() {
      this.$emit("input", this.roomCheck);
      this.$emit("update:houseId", this.roomId)
      this.$emit("comfirm");
    },
    radioChange(item) {
      this.roomCheck = item.roomNum;
      this.roomId = item.houseId
      console.log(item)
    },
    searchRoomNum() {
      console.log(this.searchValue, "searchValue");
      getData("roomInfo", "get", {roomNum: this.searchValue}).then((res) => {
        this.roomList = res
      });
    },
    bindPickerChange(e) {
      // console.log("picker发送选择改变，携带值为", e.target.value);
      console.log('bindPickerChange', e)
      let target = e.target.value ? this.array[e.target.value] : '';
      
      let {roomFloor} = target
      this.selectedFloor = roomFloor;

      getData("roomInfo", "get", {roomFloor}).then((res) => {
        this.roomList = res
      });
    },
  },
  onReady() {
    // let hostId = uni.getStorageSync("personalInfo").hotels[1].id;
    // b3beb2abd74511eb8fe7fa163eb9174b
    // b3bebb85d74511eb8fe7fa163eb9174b
    getData("roomInfo", "get").then((res) => {
      this.roomList = res
      this.array = [{
        value: '',
        roomFloor: '选择楼层'
      }].concat(res)

      // console.log(this.array)
    });
  }
};
</script>

<style lang="scss" rel="stylesheet/scss">
.check-in-dialog {
  // height: 1000rpx;
  overflow: auto;
  position: relative;
  padding-top: 30rpx;
}
.check-content {
  margin-bottom: 192rpx; //取消/确定按钮
}
.block {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 97rpx;
  margin: 0 32rpx;
  .title {
    font-size: 40rpx;
    color: #000000;
    font-weight: bold;
    // padding: 20rpx 32rpx 20rpx;
  }
  .text {
    color: #d93f06;
    font-size: 24rpx;
    text-align: right;
    // padding: 20rpx 32rpx 20rpx;
  }
}

.uni-searchbar {
  //   padding: 32rpx 16rpx !important;
}
.uni-searchbar__box {
  border-radius: 60rpx !important;
  background-color: #fff !important;
}

.popup-content {
  width: 750rpx;
  height: 100%;
}
.header{
  padding-bottom: 20rpx;
  background: #ffffff;
  .tips{
    color: #D93F06;
    font-size: 24rpx;
    margin-left: 32rpx;
    margin-top: 24rpx;
  }
}
.tool {
  // height: 96rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  
  .normal-control-con-picker {
    margin-right: 10rpx;
    width: 240rpx;
    height: 56rpx;
    // text-align: center;
    
    border: 1rpx solid #999999;
    opacity: 1;
    border-radius: 60rpx;
    position: relative;
   color: #999999;
    .uni-input {
      text-align: left;
      padding-left: 30rpx;
      font-size: 26rpx;
      font-weight: 500;
      color: #000000;
    }
    // .uni-input::placeholder{
    //   color: #CCCCCC;
    // }
    .img {
      width: 44rpx;
      height: 44rpx;
      position: absolute;
      right: 20rpx;
      top: 50%;
      transform: translateY(-50%);
      .nav-list-item-arr-show {
        display: inline-block;
        width: 44rpx;
        height: 44rpx;
      }
    }
  }
  .search-room-num {
    width: 436rpx;
    height: 56rpx;
    background: #ffffff;
    border: 1rpx solid #999999;
    opacity: 1;
    border-radius: 60rpx;
    position: relative;
    image {
      display: inline-block;
      width: 44rpx;
      height: 44rpx;
      position: absolute;
      left: 10rpx;
      top: 50%;
      transform: translateY(-50%);
    }
    // ::-webkit-input-placeholder {
    //   /* WebKit browsers */
    //   color: #cccccc;
    //   font-size: 26rpx;
    //   // font-weight: 500;
    // }
    // input::placeholder {
    //   color: #cccccc;
    //   font-size: 26rpx;
    // }
    ::-webkit-input-placeholder {
      color: #cccccc;
      font-size: 26rpx;
      font-weight: 500;
    }

    /* Firefox 4-18 */
    :-moz-placeholder {
      color: #cccccc;
      font-size: 26rpx;
      font-weight: 500;
    }

    /* Firefox 19-50 */
    ::-moz-placeholder {
      color: #cccccc;
      font-size: 26rpx;
      font-weight: 500;
    }

    /* - Internet Explorer 10–11
   - Internet Explorer Mobile 10-11 */
    :-ms-input-placeholder {
      color: #cccccc;
      font-size: 26rpx;
      font-weight: 500;
    }

    /* Edge (also supports ::-webkit-input-placeholder) */
    ::-ms-input-placeholder {
      color: #cccccc;
      font-size: 26rpx;
      font-weight: 500;
    }

    /* CSS Working Draft */
    ::placeholder {
      color: #cccccc;
      font-size: 26rpx;
      font-weight: 500;
    }
  }
  // .search {
  //   background: #fff;
  //   border: 1rpx solid #999999;
  //   // border-radius: 50%;
  //   width: 436rpx;
  //   height: 56rpx;
  //   background: #ffffff;
  //   border: 1rpx solid #999999;
  //   opacity: 1;
  //   border-radius: 60rpx;
  //   /deep/ .uni_searchbar__box {
  //     background: #fff;
  //     border: 1rpx solid #999999;
  //     // border-radius: 50%;
  //     width: 436rpx;
  //     height: 56rpx;
  //     background: #ffffff;
  //     border: 1rpx solid #999999;
  //     opacity: 1;
  //     border-radius: 60rpx;
  //   }
  // }
}
.liHeader {
  background: #f7f7f7;
  // padding: 20rpx 32rpx;
  height: 48rpx;
  line-height: 48rpx;
  margin-bottom: 22rpx;
  padding-left: 32rpx;
  font-size: 34rpx;
}
.liContentwraper {
  display: flex;
  padding: 0 32rpx;
  justify-content: space-between;
  flex-wrap: wrap;
}
.roomContainer {
  width: 328rpx;
  height: 160rpx;
  border: 2rpx solid #e5e5e5;
  // background: #f2f2f2;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  .top {
    display: flex;
    align-items: center;
    justify-content: center;
    // justify-content: space-between;
    height: 68rpx;
    font-size: 30rpx;
    // .roomNum {
    //   width: 60%;
    //   background: #fff;
    //   text-align: center;
    //   line-height: 64rpx;
    //   border-top-left-radius: 16rpx;
    // }
    .status {
      // width: 40%;
    
      background-color: #daffd5;
      text-align: center;
      // line-height: 64rpx;
      color: #66dd55;
      // border-top-right-radius: 16rpx;
      // border-radius: 0rpx 16rpx 0rpx 16rpx;
    }
    .status-ruzhu {
      // width: 40%;
      background-color: #fbebe5;
      text-align: center;
      line-height: 64rpx;
      color: #d93f06;
      // border-top-right-radius: 16rpx;
      border-radius: 0rpx 16rpx 0rpx 16rpx;
    }
  }
  .status-wrapper {
    position: relative;
  
    font-size: 30rpx;
    font-weight: 500;
      background: #f2f2f2;
    p{

    display: flex;
     align-items: center;
    justify-content: center;
      height: 92rpx;
         border-radius: 0rpx 0rpx 16rpx 16rpx;
    }
   
  
      .green-status{
color: #66DD55;
background-color: #DAFFD5;
      }
      .red-status{
color:#F15B53;
background-color: #FCDEDC;
      }
  }
  // .radio {
  //   position: absolute;
  //   right: 0;
  //   top: 20rpx;
  // }
}
.roomContainerCheck {
  border: 2rpx solid #2c9af1;
  .roomNum {
    color: #2c9af1;
  }
}
.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  border:1px solid #efefef;
  // padding: 58rpx 32rpx;
  // border: 1rpx solid #cccccc;
  background: #fff;
  button{
    margin: 30rpx 32rpx;
    // width: 100%;
  }
  .cancle {
    width: 328rpx;
    color: #000000;
    font-size: 34rpx;
    background: #fff;
    border: 1rpx solid #cccccc;
    border-radius: 16rpx;
    margin-right: 30rpx;
  }
  .dialogOk {
    // width: 328rpx;
    color: #fff;
    font-size: 34rpx;
    background: #2c9af1;
    border-radius: 16rpx;
  }
}
</style>
